<template>
    <div class="image-swiper">
        <el-carousel :height="`${bannerHeight}px`">
            <el-carousel-item v-for="item in images" :key="item">
                <img class="image" :src="item">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    const images = [
        require('@/assets/1.png'),
        require('@/assets/2.png'),
        require('@/assets/3.png'),
    ]
    export default {
        name: "swiper",
        components: {},
        data() {
            return {
                bannerHeight: 470,//默认轮播图高度
                images,
            }
        },
        mounted() {
            // 首次加载时,需要调用一次
            this.screenWidth = window.innerWidth;
            this.setSize();
            // 窗口大小发生改变时,调用一次
            window.onresize = () => {
                this.screenWidth = window.innerWidth;
                this.setSize();
            }
        },
        methods: {
            setSize: function () {
                // 通过浏览器宽度(图片宽度)计算高度
                this.bannerHeight = this.screenWidth > 1200 ? 748 / 1920 * this.screenWidth : 470;
            },
        },
    }
</script>

<style scoped lang="scss">
    .image-swiper {

    }

    @media screen and (max-width: 1200px) {
        .image-swiper {

        }
    }

    .small {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: auto;
        width: 100%;
    }

    .image {
        height: 100%;
        width: 100%;
        background-clip: content-box;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>